<template>
  <div class="submission-list">
    <!-- 搜索框 -->
    <el-row :gutter="20" class="search-bar" style="margin-bottom: 20px">
      <el-col :span="4">
        <el-input
          v-model="search.problemId"
          placeholder="题目编号"
          clearable
          size="small"
        />
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="search.username"
          placeholder="用户名"
          clearable
          size="small"
        />
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="search.language"
          placeholder="状态"
          clearable
          size="small"
        >
          <el-option label="全部" value=""></el-option>
          <el-option label="cpp" value="cpp"></el-option>
          <el-option label="java" value="java"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="search.result"
          placeholder="状态"
          clearable
          size="small"
        >
          <el-option label="全部" value=""></el-option>
          <el-option label="正确" value="正确"></el-option>
          <el-option label="答案错误" value="答案错误"></el-option>
          <el-option label="编译错误" value="编译错误"></el-option>
        </el-select>
      </el-col>
      <el-col :span="2" style="margin-top: 0px">
        <el-button type="primary" @click="fetchSubmissions">搜索</el-button>
      </el-col>
    </el-row>

    <!-- 表格样式 -->
    <el-table
      :data="submissions"
      style="width: 100%; text-align: center"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column label="提交ID" prop="id"></el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="题目ID" prop="problemId">
        <template v-slot="scope">
          <el-button
            @click="$router.push('/challenge/' + scope.row.problemId)"
            size="small"
            type="text"
          >
            {{ scope.row.problemId }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="提交结果" prop="result">
        <template v-slot="scope">
          <el-button @click="viewCode(scope.row.code)" size="small" type="text">
            <el-tag v-if="scope.row.result === '正确'" type="success">
              答案{{ scope.row.result }}
            </el-tag>
            <el-tag v-else-if="scope.row.result === '答案错误'" type="danger">
              {{ scope.row.result }}
            </el-tag>
            <el-tag v-else type="warning"> {{ scope.row.result }} </el-tag>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="内存占用 (KB)"
        prop="memoryUsage"
      ></el-table-column>
      <el-table-column label="耗时 (ms)" prop="timeUsage"></el-table-column>
      <el-table-column label="编程语言" prop="language"></el-table-column>
      <el-table-column label="提交时间" prop="submissionTime">
        <template #default="{ row }">
          {{ formatDate(row.submissionTime) }}
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件样式 -->
    <el-pagination
      class="pagination"
      :current-page="pageNum"
      :page-size="pageSize"
      :total="total"
      @current-change="handlePageChange"
      layout="total, prev, pager, next, jumper"
      background
    />

    <!-- 查看代码的对话框 -->
    <el-dialog
      title="查看代码"
      v-model="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-pre class="code-block">
        {{ currentCode }}
      </el-pre>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import request from "@/utils/request"; // 假设你有一个 request 的工具来发送 HTTP 请求

export default {
  data() {
    return {
      submissions: [], // 提交记录
      pageNum: 1, // 当前页码
      pageSize: 20, // 每页显示记录数
      total: 0, // 总记录数
      search: {
        problemId: "", // 题目编号
        username: "", // 用户名
        language: "", // 编程语言
        result: "", // 状态
      },
      dialogVisible: false, // 控制代码查看对话框的显示
      currentCode: "", // 存储当前选中的代码
    };
  },
  mounted() {
    // 获取提交记录
    this.fetchSubmissions();
  },
  methods: {
    fetchSubmissions() {
      const userId = this.$store.state.user?.user?.id; // 从 Vuex 获取当前用户的 id
      request
        .get(`/submission/getAll/${userId}`, {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            problemId: this.search.problemId,
            username: this.search.username,
            language: this.search.language,
            result: this.search.result,
          },
        })
        .then((res) => {
          if (res && res.data) {
            this.submissions = res.data; // 获取提交记录
            this.total = res.totalPages; // 获取总页数
          } else {
            console.error("返回的数据格式不正确");
          }
        })
        .catch((error) => {
          console.error("Error fetching submissions:", error);
        });
    },

    handlePageChange(page) {
      this.pageNum = page;
      this.fetchSubmissions(); // 重新加载数据
    },

    formatDate(date) {
      const d = new Date(date);
      return d.toLocaleString(); // 根据需要返回合适的日期格式
    },

    // 点击查看代码按钮时，显示代码
    viewCode(code) {
      this.currentCode = code; // 将选中的代码赋值给 currentCode
      this.dialogVisible = true; // 打开对话框
    },

    // 关闭对话框时的处理
    handleClose(done) {
      this.dialogVisible = false;
      done();
    },
  },
};
</script>

<style scoped>
.submission-list {
  padding: 24px;
  background: #f5f7fa;
  min-height: 60vh;
}

/* 搜索栏美化 */
.search-bar .el-input,
.search-bar .el-select {
  width: 100%;
}

.search-bar .el-button {
  padding: 8px 20px;
  border-radius: 4px;
  transition: all 0.3s;
}

/* 表格美化 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 状态标签样式 */
.result-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.result-AC {
  background: #e8f5e9;
  color: #4caf50;
}
.result-WA {
  background: #ffebee;
  color: #f44336;
}
.result-RE {
  background: #fff3e0;
  color: #ff9800;
}
.result-TLE {
  background: #f5f5f5;
  color: #9e9e9e;
}

/* 分页美化 */
.pagination {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

/* 时间列样式 */
.submission-time {
  font-family: monospace;
  color: #909399;
}

/* 代码块样式 */
.code-block {
  font-family: monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
  background-color: #f5f5f5;
  box-sizing: border-box;
}
</style>
